<template>
	<view>
		<tui-list-view>
			<tui-list-cell @click="memberNameEdit" :arrow="true">
				<view class="tui-item-box">
					<view class="tui-list-cell_name">姓名</view>
					<view class="tui-right">{{memberName}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="nickNameEdit" :arrow="true">
				<view class="tui-item-box">
					<view class="tui-list-cell_name">昵称</view>
					<view class="tui-right">{{nickName}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="genderEdit" :arrow="true">
				<view class="tui-item-box">
					<view class="tui-list-cell_name">性别</view>
					<view class="tui-right">{{gender == '2' ? '女' : '男'}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberName: '',
				nickName: '',
				gender: ''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getMemberInfo()
		},
		methods: {
			memberNameEdit() {
				let param = {
					key: "memberName",
					value: this.memberName
				}
				this.editMemberInfo(param)
			},
			nickNameEdit() {
				let param = {
					key: "nickName",
					value: this.nickName
				}
				this.editMemberInfo(param)
			},
			genderEdit() {
				let param = {
					key: "gender",
					value: this.gender
				}
				this.editMemberInfo(param)
			},
			editMemberInfo(param) {
				uni.navigateTo({
					url: `/pages/person/personEdit?param=${JSON.stringify(param)}`
				})
			},
			getMemberInfo() {
				this.fetch.request("/api/wxmini/getMemberInfo", "POST", {
					
				}, false, true, true, this)
				.then((res) => {
					if (res.code == 0) {
						let data = res.data
						this.memberName = data.membername == null ? '' : data.membername
						this.nickName = data.nickname
						this.gender = data.gender
					}
				}).catch((err) => {})
			}
		}
	}
</script>

<style>
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-ml-auto {
		margin-left: auto;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
</style>
